<template>
    <div>
        <!-- 选项卡 -->
        <cmsTitle no-back />
        <div class="tabs flex flex-y flex-between">
            <ul class="flex flex-y">
                <li
                    v-for="(item,index) in tabs"
                    :key="item.id"
                    :class="{active:type==item.id}"
                    @click="changeTab(item.id)">
                    {{ item.name }}
                </li>
            </ul>
            <el-button type="primary" size="small" @click="dialog = true">新增</el-button>
        </div>
        <!-- 内容 -->
        <div class="main">
            <el-table v-loading="loading" :data="formData" style="width: 100%">
                <el-table-column prop="versionNo" label="版本号" width="180" />
                <el-table-column prop="versionDescription" label="更新内容" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="date" label="强制开关">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="scope.row.versionNo == formData[0].versionNo"
                            v-model="switchDown"
                            active-color="#13ce66"
                            inactive-color="#999"
                            active-value="1"
                            inactive-value="0"
                            @change="changeSwitch"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增 -->
        <el-dialog title="新增版本" :visible.sync="dialog" width="450px">
            <!-- 内容 -->
            <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="80px"
                class="new"
                :v-loading="loading">
                <div class="group">
                    <el-form-item label="版本号" prop="version">
                        <el-input v-model="ruleForm.version" />
                    </el-form-item>
                </div>
                <div class="group">
                    <el-form-item label="更新内容" prop="text">
                        <el-input v-model="ruleForm.text" type="textarea" />
                    </el-form-item>
                </div>
                <div class="group" v-if="type == 'android'">
                    <el-form-item label="下载地址" prop="url">
                        <el-input v-model="ruleForm.url" type="textarea" />
                    </el-form-item>
                </div>
            </el-form>
            <!-- 提交 -->
            <div class="flex flex-end">
                <div class="btn">
                    <el-button size="small" @click="dialog = false">取消</el-button>
                </div>
                <div class="btn">
                    <el-button type="primary" size="small" @click="submit()">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            switchDown: '1', // 强制开关
            type: 'android', // 0安卓，1苹果
            tabs: [
                {
                    id:"android",
                    name:"安卓"
                },
                {
                    id:"iOS",
                    name:"IOS"
                }
            ],
            loading: false,
            formData: [],
            dialog: false,
            // 新增
            ruleForm: {
                version: '',
                text: '',
                url:''
            },
            rules: {
                version: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    },
                    {
                        max: 20,
                        message: '不能超过20个字符',
                        trigger: 'blur'
                    }
                ],
                url:[
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    },
                ]
            }
        }
    },
    mounted () {
        this.list();
    },
    methods: {
        // 列表
        list: function () {
            this.loading = true;
            HTTP('version_list', {
                systemRe: this.type
            })
            .then(res => {
                if(res.code == 200){
                    this.loading = false;
                    this.formData = res.data;
                    if(this.formData.length>0){
                        this.switchDown = res.data[0].forceUp + '';
                    }
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //切换选项卡
        changeTab:function(id){
            this.type = id;
            this.list();
        },
        // 删除
        del: function (obj) {
            console.log(obj)
            this.$confirm(`确定要删除版本号 ${obj.versionNo} 吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                HTTP('version_del', {
                    uid: obj.versionNumberUid
                })
                .then(res => {
                    if(res.code == 200){
                        this.list();
                        this.common.msg('删除成功');
                    }
                    else{
                        this.common.msg(res.msg,'error');
                    }
                })
            })
        },
        //强制开关
        changeSwitch:function(){
            HTTP('version_switch', {
                uid: this.formData[0].versionNumberUid,
                status:this.switchDown
            })
            .then(res=>{
                if(res.code != 200){
                    this.common.msg(res.msg,'error');
                }
            })
        },
        // 提交
        submit: function () {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    HTTP('version_add', {
                        versionNo:this.ruleForm.version,
                        versionDescription:this.ruleForm.text,
                        systemRe:this.type,
                        downUrl:this.type == 'android'?this.ruleForm.url:''
                    })
                    .then(res => {
                        if(res.code == 200){
                            this.common.msg('操作成功');
                            this.list();
                            this.dialog = false;
                        }
                        else{
                            this.common.msg(res.data.msg,'error');
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
// 饿了么样式
/deep/ .el-dialog__header {
    text-align: center;
}
/deep/ .el-textarea__inner {
    height: 100px;
}
.title {
    padding: 15px;
    border-bottom: 1px solid #dedede;
}
.tabs {
    background-color: #fff;
    padding: 0 30px;
    ul {
        li {
            padding: 0;
            margin-left: 30px;
            margin-right: 40px;
            height: 55px;
            line-height: 55px;
            cursor: pointer;
        }
        .active {
            color: $primary;
            border-bottom: 2px solid $primary;
        }
    }
}
.main {
    padding: 30px 50px;
    background-color: #fff;
    margin-top: 10px;
    min-height: calc(100vh - 200px);
}
//弹窗
.new {
    .group {
        width: 90%;
        margin: 0 auto;
    }
}
.btn {
    margin-right: 20px;
}
</style>
